#carousel {position: relative; width: 100%; height: auto;}
#carousel .inner {height: 100%; overflow: hidden;}
#carousel .inner .list {position: relative; height: auto;}
#carousel .item {width: 100%; float: left; font-size: 5em; color: #eee; line-height: auto; text-align: center; background-color: rgba(52,136,210,.7);}
@keyframes breath{
  0% {bottom: 38px;}
  25% {bottom: 26px;}
  50% {bottom: 38px;}
  75% {bottom: 50px;}
  100% {bottom: 38px;}
}
/* .inner .narrow {position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%); width: 50px; height: 40px; animation: breath 2s linear infinite;} */
#carousel .switch {position: absolute; top: 50%; transform: translateY(-50%); width: 70px; overflow: hidden; z-index: 113;}
#carousel .switch.prev {left: 0; padding-right: 30px;}
#carousel .switch.next {right: 0; padding-left: 30px;}
/* #carousel .switch.prev a {background: url(../img/7.png) no-repeat center;} */
/* #carousel .switch.next a {background: url(../img/6.png) no-repeat center;} */
#carousel .switch.prev a, #carousel .switch.next a {display: block; height: 80px; background-color: rgba(0,0,0,.2); line-height: 80px; text-decoration: none; text-align: center; color: #fff;}
#carousel .switch.prev a:hover, #carousel .switch.next a:hover {background-color: rgba(0,0,0,.4);}

#carousel .indicator {position: absolute; bottom: 0; width: 100%; text-align: center; background-color: rgba(0,0,0,.3);}
#carousel .indicator .idt-i {display: inline-block; width: 12px; height: 12px; border-radius: 100%; margin: 15px 5px; vertical-align: middle; background-color: rgba(255,255,255,.5); font-size: 10px; color: #fff;}
#carousel .indicator .idt-i.active {background-color: rgba(0,0,0,.5);}